MyModules.define('tabs',[],function(){
	
	class Child extends WidgetObject {
	    constructor() {
	        super(); // 调用父类构造函数
	        // 子类可以添加自己的属性或方法
	        this.name = '標籤頁';
		    this.datas.name = this.name;
		    this.datas.value = {
				content:{},
				class:'',
				class_id:'',
				style:''
			};
		    this.getHtml = function () {
	            var id = this.datas.id;
	            var title = this.datas.value['content']['title'] ? this.datas.value['content']['title']  : [];
	            var content = this.datas.value['content']['options'] ? this.datas.value['content']['options'] : [];
	            
	            var tab_label = '';
	            var tab_content = '';
	            for(var i=0 ; i< title.length; i++){
	                var activeClass = i==0? 'active' : '';
	                tab_label += '<li role="presentation" class="'+activeClass+'"><a href="#home-'+id+'_'+i+'" aria-controls="home-'+id+'_'+i+'" role="tab" data-toggle="tab">'+title[i]+'</a></li>';
	                tab_content += '<div role="tabpanel" class="tab-pane '+activeClass+'" id="home-'+id+'_'+i+'">'+content[i]+'</div>';
	            }
	            var str = `
	            <div class="wrap-widget panel-group" id="accordion" role="tablist" aria-multiselectable="true" data-id="${id}"  data-original-title="${this.datas.name}" data-toggle="tooltip">
	            <div class="panel panel-default">
	            <ul class="nav nav-tabs" role="tablist">
	            ${tab_label}
	            </ul>
	            <div class="tab-content">
	            ${tab_content}
	            </div>
	            </div>
	            </div>
	            `;
				return str;
			};
			this.saveData = function(){
				var values = $("#myModal form").serializeArray();
				
				var title = []
				var options = []
				for(var x of values){
					if(x['name'] == 'title'){
						title.push(x['value']);
					}else if(x['name'] == 'options'){
						options.push(x['value']);					
					}
				}
				this.datas.value = arrayToObject(values);
				this.datas.value['content'] = {"title":title, "options":options}
				console.log(this.datas.value)
			};
	        this.inputTemplate = function(id, value){
	            var title='',content='',couner=0,content_html='';
	            if( typeof(value)!="undefined" && typeof(value['content']!="undefined") ){
	                title = value['content']['title'] ? value['content']['title'] : '';
	                content = value['content']['options'] ? value['content']['options'] : '';

	                for(var i=0 ; i< title.length; i++){
	                    content_html += tabTemplate.rowTemplate(id, {title:title[i], content:content[i]}, i);
	                    couner++;
	                }
	            }
	            
	            var shtml = `
	                <button type="button" class="btn btn-success" data-type="addtabrow" data-id="${id}" data-counter="${couner}">添加標籤頁</button>
	                <div class="tabrow-container">
	                ${content_html}
	                </div>
	                `;
	            return shtml;
	        };
	        this.registerJs = function(){
	            var self = this;
	            $(document).on("click", "[data-type='addtabrow']",function(){
	                var id = $(this).data("id");
	                var counter = $(this).data("counter");
	                counter = Number(counter) + 1;
	                $("#"+id+" .tabrow-container").append(tabTemplate.rowTemplate(id, '', counter));
	                var editor_id = "editorWidget_"+id+"_"+counter;
	                tinymce.execCommand('mceAddEditor', false, editor_id);
	                $(this).data("counter", counter);
	            });
	            $(document).on("click", "#"+this.datas.id+" .btn-danger", function(){
	                $(this).parents(".tab-item").remove();
	            });
	            var value = this.datas.value;
	            if( typeof(value)!="undefined" && typeof(value['content']!="undefined") ){
	            	var counter=0,id = this.datas.id,
	            	title = value['content']['title'] ? value['content']['title'] : '',
	            	content = value['content']['options'] ? value['content']['options'] : '';
	                for(var i=0 ; i< title.length; i++){
	                	var editor_id = "editorWidget_"+id+"_"+counter;
	                	console.log(editor_id);
	                	my_editor.showEditor(editor_id, content[i]);
	                    counter++;
	                }
	            }
	        };
	        this.close = function(){
	            console.log("close doned");
	            $(document).off("click", "[data-type='addtabrow']");
	            $(document).off("click", "#"+this.datas.id+" .form-group .btn-danger");
	        };
	    }
	}
	return new Child();
});
var tabTemplate={
    rowTemplate(id, value, index){
        var title='',content='';
        title = typeof(value)!="undefined" && typeof(value['title'])!="undefined" ? value['title'] : '';
        content = typeof(value)!="undefined" && typeof(value['content'])!="undefined"  ? value['content'] : '';
        id += "_"+index;
        var str = `
        <div class="tab-item tab-row-${id}" data-row="${index}">
            <label><button type="button" class="btn btn-danger">刪除</button></label>
            <div class="form-group" >
            <label>標題</label>
            <input type="text" name="title" value="${title}" class="form-control"/>
            </div>
            <div class="form-group">
            <textArea placeholder="內容" name="options" class="form-control" id="editorWidget_${id}">${content}</textArea>
            </div>
        </div>
        `;
        return str;
    }
}
